<template>
  <div class="container" style="height: 100vh;width: 300px;padding: 20px;box-sizing: border-box;width: 100%;">
    <header>
      <MBreadcrumb :item="breadcrumbItem" />
    </header>
    <main>
      <div class="label">
        <div style="display: flex;justify-content: flex-start;height: 30px;line-height: 30px;">
          <div>
            <div :class="sectionNum == 1 ? 'tabitemSel' : 'tabitem'" @click="changePage(1)">赋码规则</div>
          </div>
          <div style="margin-left: 20px;">
            <div :class="sectionNum == 2 ? 'tabitemSel' : 'tabitem'" @click="changePage(2)">编码规则</div>
          </div>
        </div>
        <div class="showed" v-if="sectionNum == 1">
          <div v-if="!isOpen2">
            <div style="text-align: left">
              <MButton @click="addCode" style="width: 80px;height: 25px;margin: 10px 0 20px 0;" v-if="!isDisable">
                添加
              </MButton>
            </div>
            <div v-for="(obj, index) in MListItem" :key="index" style="  overflow-y: auto;">
              <MTitle class="title" :rightIcon="rightIcon">
                <template #right>
                  <MIcon :src="Edit" class="righticon" @click="updateCode(obj)">
                  </MIcon>
                  <MIcon :src="Delete" class="righticon" @click="deleteCode(obj)">
                  </MIcon>
                </template>
              </MTitle>
              <MList :item="obj.value"></MList>
            </div>
          </div>
          <div v-if="isOpen2">
            <form>
              <div class="formItem">
                <div class="formItem-left">规则名称：</div>
                <div class="formItem-right">
                  <MInput placeholder="请输入规则名称" v-model="formData.rulename" style="width: 80%;"></MInput>
                </div>
              </div>
              <div class="formItem">
                <div class="formItem-left">规则类型：</div>
                <div class="formItem-right">
                  <MSelect v-model="formData.ruletype" :options="options" :value="formData.ruletype" id="ruletype"
                    required style="flex: 1 1 200px;width: 80%;">
                  </MSelect>
                </div>
              </div>
              <div class="formItem">
                <div class="formItem-left">编码规则：</div>
                <div class="formItem-right">
                  <MSelect v-model="formData.codingid" :options="ruleoptions" :value="formData.codingid" id="codingid"
                    required style="flex: 1 1 200px;width: 80%;">
                  </MSelect>
                </div>
              </div>
              <div class="formItem">
                <div class="formItem-left" style="color: #457bf7ff;cursor: pointer;" @click="previewCode">点击预览：
                </div>
                <div class="formItem-right" style="word-wrap: break-word">
                  <textarea v-model="previewCodeInfo"
                    style="width: 80%;  font-size: 12px;border: 1px solid #d2d2d2;border-radius: 4px;" rows="3"
                    disabled></textarea>

                </div>
              </div>
            </form>
            <div style="">
              <MButton @click="codeCanle" style="background: white;color: black;border: 1px solid #e2e2e2;">取消
              </MButton>
              <MButton @click="saveCode" style="margin-left: 10px;">确定</MButton>
            </div>
          </div>

        </div>
        <div class="showed" v-if="sectionNum == 2">
          <div v-if="!isOpen">
            <div style="text-align: left">
              <MButton @click="addRule" style="width: 80px;height: 25px;margin: 10px 0 20px 0;" v-if="!isDisable">
                添加</MButton>
            </div>
            <div v-for="(obj, index) in MListItem2" :key="index" style="  overflow-y: auto;">
              <MTitle class="title" :rightIcon="rightIcon">
                <template #right>
                  <MIcon :src="Edit" class="righticon" @click="updateRule(obj)">
                  </MIcon>

                </template>
              </MTitle>
              <MList :item="obj.value"></MList>
            </div>
          </div>
          <div v-if="isOpen">
            <form v-if="step == 0">
              <div class="formItem">
                <div class="formItem-left">规则名称：</div>
                <div class="formItem-right">
                  <MInput placeholder="请输入规则名称" v-model="ruleName"></MInput>
                </div>
              </div>
              <div class="formItem" style="height: 120px;margin-top: 20px;">
                <div style="width: 70px;font-size: 14px;">规则设置：</div>
                <div style="flex:1 1 140px;display: flex;align-items: center;">
                  <div>
                    <div style="height: 30px;line-height: 30px;">
                      <MCheckbox v-model="ruleSelected[0]" label="批次号" />
                    </div>
                    <div style="height: 30px;line-height: 30px;">
                      <MCheckbox v-model="ruleSelected[1]" label="序列号" />
                    </div>
                    <div style="height: 30px;line-height: 30px;">
                      <MCheckbox v-model="ruleSelected[2]" label="随机码" />
                    </div>
                    <div style="font-size: 12px;height: 20px;line-height: 20px;">已选规则:
                      {{ ruleSelected[0] ? "批次号 " : "" }}{{ ruleSelected[0] && (ruleSelected[1] || ruleSelected[2]) ?
                        "-" : ""
                      }}
                      {{ ruleSelected[1] ? "序列号 " : "" }}{{ ruleSelected[1] && (ruleSelected[2]) ? "-" : "" }}
                      {{ ruleSelected[2] ? "随机码 " : "" }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="formItem" style="margin-top: 20px;">
                <div class="formItem-left">分隔符：</div>
                <div class="formItem-right">
                  <div style=" height: 50px;">
                    <div style="width: 110px;height: 30px;line-height: 30px;">
                      <MRadio v-model="isSeparator" value="0" label="启用分隔符'.'" />
                    </div>
                    <div style="width: 110px;height: 30px;line-height: 30px;">
                      <MRadio v-model="isSeparator" value="1" label="停用分隔符'.'" />
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div v-if="step == 1" style="margin: 20px 0;">
              <div style="text-align: left;font-size: 14px;">批次号：</div>
              <div style="text-align: left;margin-top: 10px;font-size: 12px;padding: 0 20px;">
                <div style="margin: 10px 0;">按时间编码（顺序码最小长度为4位，最大长度位6位）</div>
                <div style="height: 30px;display: flex;align-items: center;">
                  <MRadio v-model="timeFormat" value="0" label="按'日'编码，顺序码长度 " />
                  <MInput style="margin-left: 5px;width: 40%;font-size: 12px;" :disabled="timeFormat != '0'"
                    :placeholder="'请输入顺序码'" v-model="BatchNumer" v-if="timeFormat == '0'">
                  </MInput>
                  <MInput style="margin-left: 5px;width: 40%;font-size: 12px;" :disabled="timeFormat != '0'"
                    :placeholder="'请输入顺序码'" v-if="timeFormat != '0'">
                  </MInput>
                </div>
                <div style="text-indent:18px">如:顺序码为2，批次号为2023062201，0622为6月22日</div>
                <div style="height: 30px;display: flex;align-items: center;margin-top: 10px;">
                  <MRadio v-model="timeFormat" value="1" label="按'周'编码，顺序码长度 " />
                  <MInput style="margin-left: 5px;width: 40%;font-size: 12px;" :disabled="timeFormat != '1'"
                    :placeholder="'请输入顺序码'" v-model="BatchNumer" v-if="timeFormat == '1'">
                  </MInput>
                  <MInput style="margin-left: 5px;width: 40%;font-size: 12px;" :disabled="timeFormat != '1'"
                    :placeholder="'请输入顺序码'" v-if="timeFormat != '1'">
                  </MInput>
                </div>
                <div style="text-indent:20px">如:顺序码为2，批次号为20231701，17为17周</div>
                <div style="height: 30px;display: flex;align-items: center;margin-top: 10px;">
                  <MRadio v-model="timeFormat" value="2" label="按'月'编码，顺序码长度 " />
                  <MInput style="margin-left: 5px;width: 40%;font-size: 12px;" :disabled="timeFormat != '2'"
                    :placeholder="'请输入顺序码'" v-model="BatchNumer" v-if="timeFormat == '2'">
                  </MInput>
                  <MInput style="margin-left: 5px;width: 40%;font-size: 12px;" :disabled="timeFormat != '2'"
                    :placeholder="'请输入顺序码'" v-if="timeFormat != '2'">
                  </MInput>
                </div>
                <div style="text-indent:20px">如:顺序码为2，批次号为20230601，06为6月</div>
              </div>
            </div>
            <div v-if="step == 2" style="margin: 20px 0;">
              <div style="text-align: left;font-size: 14px;">序列号：</div>
              <div style="text-align: left;margin-top: 10px;font-size: 12px;padding: 0 20px;">
                <div style="margin: 10px 0 0 0 ;">递增编码（最小长度为6位，最大长度位8位）</div>
                <div style="margin: 10px 0 0 0 ;">如:字母起始位"AB"，数字位"1"长度4，AB0001-ZZ9999</div>
                <table id="attributeTable" class="mtable">
                  <tr class="mtr" style="background: #e2e2e2;height: 25px;line-height: 25px;">
                    <td class="field" style="width: 25%;">编码组成</td>
                    <td class="value" style="width: 35%;">起始位</td>
                    <td class="value" style="width: 35%;">代码长度</td>
                  </tr>
                  <tr class="mtr">
                    <td class="field" style="width: 25%;">字母</td>
                    <td class="value" style="width: 35%;">
                      <MInput style="width: 80%;font-size: 12px;" v-model="serialLetter[0]"></MInput>
                    </td>
                    <td class="value" style="width: 35%;">
                      <MInput style="width: 80%;font-size: 12px;" v-model="serialLetter[1]"></MInput>
                    </td>
                  </tr>
                  <tr class="mtr">
                    <td class="field" style="width: 25%;">数字</td>
                    <td class="value" style="width: 35%;">
                      <MInput style="width: 80%;font-size: 12px;" v-model="serialDigit[0]"></MInput>
                    </td>
                    <td class="value" style="width: 35%;">
                      <MInput style="width: 80%;font-size: 12px;" v-model="serialDigit[1]"></MInput>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div v-if="step == 3" style="margin: 20px 0;">
              <div style="text-align: left;font-size: 14px;">随机码：</div>
              <div style="text-align: left;margin-top: 10px;font-size: 12px;padding: 0 20px;">
                <div style="margin: 10px 0 0 0 ;">自定义（最小长度为6位，最大长度位8位）</div>
                <table id="attributeTable" class="mtable">
                  <tr class="mtr" style="background: #e2e2e2;height: 25px;line-height: 25px;">
                    <td class="field" style="width: 25%;">编码组成</td>
                    <td class="value" style="width: 35%;">代码长度</td>
                  </tr>
                  <tr class="mtr">
                    <td class="field" style="width: 25%;">字母</td>
                    <td class="value" style="width: 35%;">
                      <MInput style="width: 80%;font-size: 12px;" v-model="randomNumber[0]"></MInput>
                    </td>
                  </tr>
                  <tr class="mtr">
                    <td class="field" style="width: 25%;">数字</td>
                    <td class="value" style="width: 35%;">
                      <MInput style="width: 80%;font-size: 12px;" v-model="randomNumber[1]"></MInput>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div style="margin-top: 20px">
              <MButton @click="addCanle" style="background: white;color: black;border: 1px solid #e2e2e2;"
                v-if="step == 0">取消
              </MButton>
              <MButton @click="stepController(1)" style="background: white;color: black;border: 1px solid #e2e2e2;"
                v-if="step != 0">上一步</MButton>
              <MButton @click="stepController(0)" style="margin-left: 10px;">{{ step != stepList[stepList.length - 1] ?
                "下一步" : "保存" }}
              </MButton>
            </div>
          </div>
        </div>
      </div>
    </main>
    <MMessage v-if="toastVisible" :message="toastMessage" :state="toastState" />

  </div>
</template>
<script>
import { ref, onMounted } from 'vue';
import MBreadcrumb from "../components/MBreadcrumb.vue"
import MInput from "../components/MInput.vue"
import MCheckbox from "../components/MCheckbox.vue"
import MRadio from "../components/MRadio.vue"
import MButton from "../components/MButton.vue"
import MMessage from '../components/MMessage.vue';
import axios from "../axios/axios"
import Edit from "@/resource/edit.png"
import Delete from "@/resource/delete.png"
import MTitle from "../components/MTitle.vue"
import MList from "../components/MList.vue"
import MIcon from "../components/MIcon.vue"
import MSelect from '../components/MSelect.vue';

export default {
  name: 'CodeRules',
  components: {
    MBreadcrumb, MInput, MCheckbox, MRadio,
    MButton, MMessage, MTitle, MList, MIcon, MSelect
  },

  setup() {
    const rightIcon = [Edit, Delete]
    const userId = ref("")
    const params = ref("")
    const isDisable = ref(false)
    const toastVisible = ref(false)
    const toastMessage = ref("")
    const toastState = ref("success")
    const ruleName = ref("")
    const isOpen = ref(false)
    const MListItem = ref([])
    const MListItem2 = ref([])
    const breadcrumbItem = ref(
      {
        key: "0",
        title: '赋码管理',
        children: {
          key: "0-0",
          title: '赋码规则',
        }
      })
    const isSeparator = ref("0")
    const timeFormat = ref("0")
    const BatchNumer = ref("4")
    const sectionNum = ref(1)
    const serialLetter = ref(["AB", "2"])
    const serialDigit = ref(["1000", "4"])
    const randomNumber = ref(["3", "3"])
    const ruleSelected = ref([false, false, false])
    const step = ref(0)
    const stepList = ref([0, 1])
    const formData = ref({ "id": "", "rulename": "", "ruletype": "0", "codingid": 0 })
    const isOpen2 = ref(false)
    const isUpdate = ref(false)
    const isUpdate2 = ref(false)
    const nowItem = ref("")
    const ruleoptions = ref([])
    const options = [
      { value: '0', text: '产品规则' },
      { value: '1', text: '打包规则' },
    ]
    const previewCodeInfo = ref("")
    const previewCode = () => {
      if (formData.value.codingid != 0) {
        axios.get("/code/preview?userId=" + params.value.get("userId") + "&appId=" + params.value.get("AppId") + "&ruleId=" + formData.value.codingid).then(res => {
          previewCodeInfo.value = res.data.Data
        })
      } else {
        messageShow("请选择编码规则", "warning")

      }

    }
    const updateRule = (item) => {
      nowItem.value = item
      var data = [false, false, false]
      isUpdate2.value = true
      isOpen.value = true
      isSeparator.value = item.isolate
      if (item.batchnum != "" && item.batchnum != null) {
        timeFormat.value = item.batchnum.split(",")[0]
        BatchNumer.value = item.batchnum.split(",")[1]
        data[0] = true
      }
      if (item.serialnum != "" && item.serialnum != null) {
        var d = item.serialnum.split(",")
        serialLetter.value = [d[0], d[1]]
        serialDigit.value = [d[2], d[3]]
        data[1] = true
      }
      if (item.randomnum != "" && item.randomnum != null) {
        var r = item.randomnum.split(",")
        randomNumber.value = [r[0], r[1]]
        data[2] = true
      }
      ruleName.value = item.rulename
      ruleSelected.value = data
      var steps = []
      steps.push(0)
      ruleSelected.value.map((item, index) => {
        if (item) {
          steps.push(index + 1)
        }
      })
      stepList.value = steps
    }
    const deleteRule = (item) => {
      axios.get("/coding/delete?userId=" + params.value.get("userId") + "&id=" + item.id).then(res => {
        if (res.data.Code == "200") {
          messageShow("删除成功", "success")
          let index = MListItem2.value.findIndex(i => i.id === item.id);
          if (index !== -1) {
            MListItem2.value.splice(index, 1);
          }
        }
      })
    }
    const updateCode = (item) => {
      isUpdate.value = true
      isOpen2.value = true
      formData.value = { "id": item.id, "rulename": item.rulename, "ruletype": item.ruletype, "codingid": item.codingid }
      getRule()
    }
    const deleteCode = (item) => {
      axios.get("/rule/delete?userId=" + params.value.get('userId') + "&id=" + item.id).then(res => {
        if (res.data.Code == "200") {
          messageShow("删除成功", "success")
          let index = MListItem.value.findIndex(i => i.id === item.id);

          if (index !== -1) {
            MListItem.value.splice(index, 1);
          }
        }
      })

    }
    const addCode = () => {
      isOpen2.value = true
      getRule()

    }
    const getRule = () => {
      axios.get("/coding/select?userId=" + params.value.get('userId') + "&appId=" + params.value.get("AppId") + "&trainingId=" + params.value.get("trainingId")).then(res => {
        if (res.data.Data.length != 0) {
          var data = []
          res.data.Data.map((item) => {
            data.push({
              id: item.id,
              value: item.id,
              text: item.rulename
            })
          })
          ruleoptions.value = data
        }
      })
    }
    const codeCanle = () => {
      isOpen2.value = false
      isUpdate.value = false
    }
    const saveCode = () => {
      if (checkValue()) {
        if (!isUpdate.value) {
          var data = { ...formData.value }
          //data.codingid = ruleoptions.value[formData.value.codingid].id
          axios.post("/rule/insert?userId=" + userId.value, {
            ...data,
            appid: params.value.get("AppId"),
            trainingid: params.value.get("trainingId")
          }).then(res => {
            if (res.data.Code == "200") {
              isOpen2.value = false
              messageShow("添加成功", "success")
              var data = [...MListItem.value]
              var element = res.data.Data
              data.push({
                id: element.id,
                //title: element.rulename,
                value: [
                  {
                    key: 1,
                    field: "规则名称",
                    value: element.rulename,
                  },
                  {
                    key: 2,
                    field: "规则类型",
                    value: element.ruletype == 0 ? "产品规则" : "打包规则"
                  },
                  {
                    key: 3,
                    field: "编码类型",
                    value: element.codetype
                  }
                ],
                rulename: element.rulename,
                codingid: element.codingid,
                ruletype: element.ruletype,
              })
              MListItem.value = data
              init()
            }
          })

        } else {
          axios.post("/rule/update?userId=" + userId.value, {
            ...formData.value,
            appid: params.value.get("AppId"),
            trainingid: params.value.get("trainingId")
          }).then(res => {
            if (res.data.Code == "200") {
              isOpen2.value = false
              messageShow("修改成功", "success")
              isUpdate.value = false
              var data = [...MListItem.value]
              var element = res.data.Data
              const index = data.findIndex(d => d.id === element.id);
              var i = {
                ...data[index]
              }
              i.value[0].value = element.rulename
              i.value[1].value = element.ruletype == 0 ? "产品规则" : "打包规则"
              i.rulename = element.rulename
              i.codingid = element.codingid
              i.ruletype = element.ruletype
              data[index] = i
              MListItem.value = data
              init()
            }
          })
        }

      }

    }
    const init2 = () => {
      ruleName.value = ""
      isSeparator.value = "0"
      timeFormat.value = "0"
      BatchNumer.value = "4"
      serialLetter.value = ["AB", "2"]
      serialDigit.value = ["1000", "4"]
      randomNumber.value = ["3", "3"]
      ruleSelected.value = [false, false, false]
      step.value = 0
      stepList.value = [0, 1]
    }
    const init = () => {
      formData.value = { "id": "", "rulename": "", "ruletype": "0", "codingid": 0 }
      ruleoptions.value = []
    }
    const addRule = () => {
      isOpen.value = true
    }
    const addCanle = () => {
      isOpen.value = false
      isUpdate2.value = false
    }
    const changePage = (pageNum) => {

      if (pageNum == 2) {
        codingData()
      }
      sectionNum.value = pageNum
    }
    const stepController = (type) => {
      var steps = []
      steps.push(0)
      ruleSelected.value.map((item, index) => {
        if (item) {
          steps.push(index + 1)
        }
      })
      stepList.value = steps

      if (type == 0) {
        var res = false
        if (step.value == 0) {
          if (checkValue1()) {
            res = true
          }
        } else if (step.value == 1) {
          if (checkValue2()) {
            res = true
          }
        } else if (step.value == 2) {
          if (checkValue3()) {
            res = true
          }
        } else if (step.value == 3) {
          if (checkValue4()) {
            res = true
          }
        }
        if (res) {
          if (step.value != steps[steps.length - 1]) {
            step.value = findNextElementAfterOne(steps, step.value)
          } else {
            if (!isUpdate2.value) {
              axios.post("/coding/insert?userId=" + userId.value, {

                rulename: ruleName.value,
                batchnum: ruleSelected.value[0] ? timeFormat.value + "," + BatchNumer.value : "",
                serialnum: ruleSelected.value[1] ? serialLetter.value[0] + "," + serialLetter.value[1] + "," + serialDigit.value[0] + "," + serialDigit.value[1] : "",
                randomnum: ruleSelected.value[2] ? randomNumber.value[0] + "," + randomNumber.value[1] : "",
                isolate: isSeparator.value,
                trainingid: params.value.get("trainingId"),
                appid: params.value.get("AppId")
              }).then(res => {
                if (res.data.Code == "200") {
                  messageShow("添加成功", "success")
                  isOpen.value = false
                  var data = [...MListItem2.value]
                  var element = res.data.Data
                  var item = pushItem(element)
                  data.push(item)
                  MListItem2.value = data
                  nowItem.value = ""
                  init2()
                }
              })
            } else {
              axios.post("/coding/update?userId=" + userId.value, {
                id: nowItem.value.id,
                rulename: ruleName.value,
                batchnum: ruleSelected.value[0] ? timeFormat.value + "," + BatchNumer.value : "",
                serialnum: ruleSelected.value[1] ? serialLetter.value[0] + "," + serialLetter.value[1] + "," + serialDigit.value[0] + "," + serialDigit.value[1] : "",
                randomnum: ruleSelected.value[2] ? randomNumber.value[0] + "," + randomNumber.value[1] : "",
                isolate: isSeparator.value,
                trainingid: params.value.get("trainingId"),
                appid: params.value.get("AppId")
              }).then(res => {
                if (res.data.Code == "200") {
                  messageShow("修改成功", "success")
                  isOpen.value = false
                  var data = [...MListItem2.value]
                  var element = res.data.Data
                  var item = pushItem(element)
                  const index = data.findIndex(d => d.id === element.id);
                  if (index !== -1) {
                    data.splice(index, 1);
                  }
                  data.push(item)
                  MListItem2.value = data
                  sectionNum.value = 2
                  isUpdate2.value = false
                  init2()
                }
              })
            }

          }

        }
      } else {
        step.value = findPreviousElementAfterOne(steps, step.value)
      }
    }
    const pushItem = (element) => {
      var info = []
      if (element.batchnum != "") {
        info.push("批次号")
      }
      if (element.serialnum != "") {
        info.push("系列号")
      }
      if (element.randomnum != "") {
        info.push("随机码")
      }
      var str = ""
      info.map((item, index) => {
        if (index != info.length - 1) {
          str = str + item + "-"
        } else {
          str = str + item
        }
      })

      return {
        //title: element.rulename,
        value: [
          {
            key: 1,
            field: "名称",
            value: element.rulename,
          },
          {
            key: 2,
            field: "规则内容",
            value: str
          },
          {
            key: 3,
            field: "是否使用分割符",
            value: element.isolate == "0" ? "是" : "否"
          },
        ],
        ...element
      }
    }
    function findNextElementAfterOne(arr, num) {
      for (let i = 0; i < arr.length - 1; i++) {
        if (arr[i] === num) {
          return arr[i + 1];
        }
      }
    }
    function findPreviousElementAfterOne(arr, num) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] === num) {
          return arr[i - 1];
        }
      }
      return null; // 如果没有找到值为1的元素，返回null
    }
    const checkValue = () => {
      if (formData.value.rulename == "") {
        messageShow("请输入规则名称", "warning")
        return false
      }
      if (formData.value.codingid == 0) {
        messageShow("请选择编码规则", "warning")
        return false
      }
      return true
    }
    const checkValue1 = () => {
      if (ruleName.value == "") {
        messageShow("请输入规则名称", "warning")
        return false
      }
      if (!ruleSelected.value[0] && !ruleSelected.value[1] && !ruleSelected.value[2]) {
        messageShow("请选择规则设置", "warning")
        return false
      }
      return true
    }
    const checkValue2 = () => {
      const number = parseFloat(BatchNumer.value);
      if (isNaN(number)) {
        messageShow("请输入数字", "warning")
        return false
      }
      if ((Number)(BatchNumer.value) < 4 || (Number)(BatchNumer.value) > 6) {
        messageShow("顺序码长度只支持4-6", "warning")
        return false
      }
      return true
    }
    const checkValue3 = () => {
      if (!/^[A-Z]+$/.test(serialLetter.value[0])) {
        messageShow("字母起始位请输入大写英文字母", "warning")
        return false
      }
      if (serialLetter.value[0].length != (Number)(serialLetter.value[1])) {
        messageShow("字母起始位长度与代码长度不符", "warning")
        return false
      }
      const number = parseFloat(serialDigit.value[0]);
      if (isNaN(number)) {
        messageShow("数字起始位请输入数字", "warning")
        return false
      }
      if (serialDigit.value[0].length != (Number)(serialDigit.value[1])) {
        messageShow("数字起始位长度与代码长度不符", "warning")
        return false
      }
      var length = (Number)(serialLetter.value[1]) + (Number)(serialDigit.value[1])
      if (length < 6 || length > 8) {
        messageShow("代码总长度支持6-8位", "warning")
        return false
      }
      return true
    }
    const checkValue4 = () => {
      const number = parseFloat(randomNumber.value[0]);
      const number1 = parseFloat(randomNumber.value[1]);
      if (isNaN(number)) {
        messageShow("字母编码代码长度请输入数字", "warning")
        return false
      }
      if (isNaN(number1)) {
        messageShow("字母编码代码长度请输入数字", "warning")
        return false
      }
      var length = (Number)(randomNumber.value[0]) + (Number)(randomNumber.value[1])
      if (length < 6 || length > 8) {
        messageShow("顺序码总长度只支持6-8", "warning")
        return false
      }
      return true
    }
    const messageShow = (msg, state) => {
      toastMessage.value = msg;
      toastVisible.value = true;
      toastState.value = state
      // 使用 setTimeout 模拟 Toast 组件内部的定时器功能（仅用于演示）
      // 在实际使用中，你应该依赖 Toast 组件内部的定时器
      setTimeout(() => {
        toastVisible.value = false;
      }, 3000); // 与 Toast 组件中的 duration 属性保持一致
    }
    const codingData = () => {
      axios.get("/coding/select?userId=" + params.value.get('userId') + "&appId=" + params.value.get("AppId") + "&trainingId=" + params.value.get("trainingId")).then(res => {
        const data = []

        res.data.Data.forEach(element => {
          data.push(pushItem(element))
          MListItem2.value = data
        })

      })
    }
    onMounted(() => {
      // 获取 URL 参数
      const param = new URLSearchParams(window.location.search);
      params.value = param
      if (param.has('AppId')) {
        axios.get("/rule/select?userId=" + param.get('userId') + "&appId=" + param.get("AppId") + "&trainingId=" + param.get("trainingId")).then(res => {
          const data = []
          res.data.Data.forEach(element => {
            data.push({
              id: element.id,
              //title: element.rulename,
              value: [
                {
                  key: 1,
                  field: "规则名称",
                  value: element.rulename,
                },
                {
                  key: 2,
                  field: "规则类型",
                  value: element.ruletype == 0 ? "产品规则" : "打包规则"
                },
                {
                  key: 3,
                  field: "编码类型",
                  value: element.codetype
                }
              ],
              rulename: element.rulename,
              codingid: element.codingid,
              ruletype: element.ruletype,
            })
          })
          MListItem.value = data
        })
        if (param.has('isDisable')) {
          isDisable.value = param.get('isDisable') === "true"
        }
        if (param.has('userId')) {
          userId.value = param.get('userId');
        }
      }
    });
    return {
      breadcrumbItem,
      sectionNum,
      ruleSelected,
      stepController,
      addRule,
      addCanle,
      changePage,
      addCode,
      codeCanle,
      saveCode,
      updateCode,
      previewCode,
      deleteRule,
      updateRule,
      deleteCode,
      isSeparator,
      timeFormat,
      serialLetter,
      serialDigit,
      randomNumber,
      step,
      toastVisible,
      toastMessage,
      toastState,
      ruleName,
      BatchNumer,
      stepList,
      isOpen,
      MListItem,
      MListItem2,
      Edit,
      Delete,
      isOpen2,
      options,
      formData,
      rightIcon,
      ruleoptions,
      isDisable,
      previewCodeInfo
    };
  },
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}

.mtable {
  width: 100%;
  font-size: 12px;
}

.mtr {
  display: flex;
  flex-wrap: wrap;
  /* 允许子元素换行 */
  align-items: flex-start;
  /* 确保内容对齐顶部 */
  margin: 10px 0;
  height: 30px;
  line-height: 30px;
  padding: 5px;
}

.label {
  width: 100%;
  text-align: center;
  margin: 20px 0 0 0;
}

.formItem {
  font-size: 12px;
  text-align: left;
  font-weight: normal;
  height: 50px;
  line-height: 50px;
  display: flex;
}

.formItem-left {
  width: 70px;
  font-size: 14px;
}

.formItem-right {
  flex: 1 1 120px;
  white-space: normal;
}

.tabitem {
  text-align: left;
  color: #737373ff;
  /* border: 1px solid #e2e2e2;
  border-radius: 5px 5px 0 0 ; */
}

.tabitemSel {
  text-align: left;
  color: black;
  border-bottom: 2px solid black;
}

.righticon {
  margin: 0 0 0 10px;
}

.showed {
  width: 100%;
  padding-top: 10px;
}

hr.dashed {
  border: none;
  border-top: 2px dashed #000;
  /* 你可以根据需要调整颜色和粗细 */
  margin: 20px 0;
  /* 调整外边距 */
}
</style>
